/**
 * Created by 陈文豪 on 2017/5/4.
 */
import {Component, ViewChild, ElementRef, ViewEncapsulation, OnDestroy, Input,} from '@angular/core';
import {ToolsService} from "../../service/tools/tools.service";
import {Subject} from "rxjs";
import {ToolbarService} from "./toolbar.service";
@Component({
  selector: 'seed-content',
  template: `
    <ng-content select=".seed-scroll-outside"></ng-content>
    <div
      [class.show]="isVisible"
      id="seed-scroll-top"
      (click)="scrollTop()"
    >
    </div>
    <div
      #content
      id="seed-scroll-content"
      class="seed-scroll-content"
      (scroll)="onScroll()"
    >
      <seed-advertisement *ngIf="ad"></seed-advertisement>
      <ng-content></ng-content>
    </div>

  `,
  encapsulation: ViewEncapsulation.None
})
export class Content implements OnDestroy{
  @Input() ad = true;
  public isVisible = false;
  public isScrolling: boolean;
  private unsbscribe: Subject<void> = new Subject<void>();
  private _scrollPos = 0;

  @ViewChild('content') public content: ElementRef;

  constructor(public tools: ToolsService,
              public toolBarService: ToolbarService) {

  }

  get getScrollElement() {
    return this.content.nativeElement;
  }

  get contentHeight(): number {
    return this.content.nativeElement.contentHeight;
  }

  get scrollHeight(): number {
    return this.content.nativeElement.scrollHeight;
  }

  get scrollWidth(): number {
    return this.content.nativeElement.scrollWidth;
  }

  get scrollPosition() {
    return this._scrollPos;
  }

  set scrollPosition(val) {
    this._scrollPos = val;
  }

  scrollTop(): void {
    this.content.nativeElement.scrollTop = 0;
  }

  scrollTo(val: number): void {
    this.content.nativeElement.scrollTop = val;
  }

  enableScroll(status: boolean = false) {
    let content = this.content.nativeElement;
    if (status) {
      if (content.classList.contains('no-scroll')) {
        content.classList.remove('no-scroll');
      }
    } else {
      if (!content.classList.contains('no-scroll')) {
        content.classList.add('no-scroll');
      }
    }

  }

  disableScroll() {
    let content = this.content.nativeElement;
    if (!content.classList.contains('no-scroll')) {
      content.classList.add('no-scroll');
    }
  }

  disableScrollBtn(states: boolean = true) {
    return states ? true : false;
  }

  onScroll() {
    this.scrollPosition = this.content.nativeElement.scrollTop;
    if (this.scrollPosition > 200) {
      this.isVisible = true;
    } else if (this.isVisible && this.scrollPosition < 200) {
      this.isVisible = false;
    }
    this.toolBarService.unfoldNav();
  }

  ngOnDestroy() {
    this.unsbscribe.next();
    this.unsbscribe.complete();
  }
}

